[FEAT] weekly 퍼블리싱 #56
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Kjiw0n
reviewed
Jul 8, 2024
wrryu09
reviewed
Jul 8, 2024
|
|
||
| const WeekDay = styled.div<{ isToday: boolean }>` | ||
| ${({ theme }) => theme.fontTheme.CAPTION_02}; | ||
| color: ${(props) => (props.isToday ? props.theme.palette.BLUE_DISABLED : props.theme.palette.GREY_04)}; |
There was a problem hiding this comment.
Suggested change
| color: ${(props) => (props.isToday ? props.theme.palette.BLUE_DISABLED : props.theme.palette.GREY_04)}; | |
| color: ${({ isToday, theme }) => (isToday ? theme.palette.BLUE_DISABLED : theme.palette.GREY_04)}; |
여기 일케 더 간결하게 쓸 수 있을 것 같습니다!
Comment on lines
+151
to
+153
| :root { | ||
| --fc-highlight-color: #dfe9ff; | ||
| } |
There was a problem hiding this comment.
시간을 드래그 할 때 생기는 배경색입니다! 지정을 새로 해주니 원하는 색으로 잘 변경되어서 이렇게 했는데 더 좋은 방법이 있다면 변경하겠습니다!
There was a problem hiding this comment.
요것도 띰 적용할 수 있을 것 같아요! blue2네용 ㅎ.ㅎ
Comment on lines
30
to
44
| const customDayCellContent = (info: DayCellContentArg) => { | ||
| const number = document.createElement('a'); | ||
| number.classList.add('fc-daygrid-day-number'); | ||
| number.innerHTML = info.dayNumberText.replace('일', ''); | ||
|
|
||
| if (info.view.type === 'dayGridMonth') { | ||
| return { | ||
| html: number.outerHTML, | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| domNodes: [], | ||
| }; | ||
| }; |
There was a problem hiding this comment.
월간 달력에서 날짜형식이 7일로 나오는데 이 부분을 일을 지우고 숫자 7만 나오게 하기 위해서 사용한 코드입니다!
wrryu09
approved these changes
Jul 8, 2024
Kjiw0n
approved these changes
Jul 8, 2024
Comment on lines
+71
to
+66
| slotDuration="00:30:00" | ||
| editable | ||
| selectable | ||
| nowIndicator | ||
| dayMaxEvents | ||
| events={[ | ||
| { title: 'Meeting', start: '2024-07-06T10:00:00', end: '2024-07-06T12:00:00' }, | ||
| { title: 'Lunch', start: '2024-07-07T12:00:00', end: '2024-07-07T12:45:00' }, | ||
| { title: 'Lunch', start: '2024-07-08T12:00:00', end: '2024-07-08T12:30:00' }, | ||
| { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true }, | ||
| ]} |
There was a problem hiding this comment.
사용할때는 이 부분은 props로 받아서 처리하는건가요???
There was a problem hiding this comment.
네넹 이 부분은 Props로 받아서 처리하면 됩니당!
| { title: 'Lunch', start: '2024-07-08T12:00:00', end: '2024-07-08T12:30:00' }, | ||
| { title: 'All Day Event', start: '2024-07-08T10:00:00', end: '2024-07-08T12:00:00', allDay: true }, | ||
| ]} | ||
| eventColor="#dfe9ff" |
jeeminyi
approved these changes
Jul 8, 2024
seong-hui
force-pushed
the
feat/#22/weekly-view
branch
from
b0e6694
to
a410971
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
작업 내용 🧑💻
fullcalendar 라이브러리 커스텀을 진행하였습니다.
캘린더 커스텀 스타일이 길어져서 따로 style.ts 파일로 분리하였습니다.
캘린더를 big, small로 2가지 크기를 props로 받을 수 있게 만들었습니다
DayHeaderContent 는 일간, 월간, 주간을 클릭할 때마다 일간에서는 <날짜 요일>, 주간에서는 <요일 날짜>, 월간에서는 요일만 처럼 다 다르게 헤더에 표시되고 있어서 이를 다 다르게 렌더링하기 위해서 추가했습니다. 추가적으로 주간에서 오늘 날짜일 경우 헤더의 색상을 파란색으로 표시하고자 하셔서 이 부분도 추가하였습니다.
FullCalendarBox는 FullCalendar라이브러리를 불러와서 옵션을 적용한 부분 입니다.
FullCalendarStyle은 커스텀 스타일이 너무 많아서 스타일을 따로 분리했습니다. 각 커스텀에 대한 설명은 주석으로 달아놓았습니다.
SlotLabelContent는 일간 주간에 나오는
12 AM과 같은 시간 형식을 만들기 위해 사용하였습니다.켈린더에 사용하지만 theme에 없는 색상이 있어서 일단 추가는 해놨는데 디자인 파트에게 물어보도록 할게요!
알게된 점 🚀
리뷰 요구사항 💬
관련 이슈
close #22
스크린샷 (선택)
Screen.Recording.2024-07-08.at.5.22.15.PM.mov